1. Problem
You need to develop a Windows
Phone 7 application that provides a dynamic user interface that changes
based on the user's choices of theme and font.
2. Solution
You can use the Windows
Phone 7 predefined styles so that you are sure your user interface will
change fonts and colors according to your user's setting changes.
3. How It Works
When you define the user
interface of your Silverlight for Windows Phone 7 application, it is
very common to add text blocks, text boxes, links, and so forth. You can
specify their dimensions, colors, and positions, but you need to pay
attention to the changes made by the user in the Settings system page
(see Figure 1).
For example, by selecting
the Theme menu item, the user can change the Phone Accent color. If your
user interface provides links to other pages or external web pages,
this color should be used to specify this information. By using those
predefined styles, you can be sure that your link's color will change to
the new user selection automatically.
The
Windows Phone 7 theme is a set of resources such as background colors
and phone accent color used to customize the phone's look. By using the
predefined resource dictionary provided by the phone, you can be sure to
maintain the consistency and compatibility of your application.
Moreover, you can be pretty sure that your application will pass
Marketplace approval.
When you need to use your
own colors, fonts, and so forth, you can override the static resource in
your application. Obviously, this change will be applied only to your
application and not to the entire phone system.
You can specify the static resource either in an XAML file or in a code file. In the former, you can use the {StaticResource}
markup extension together with the static resource name. This static
resource will be added to your application when it starts. In the latter
case, you can use the Resources property from the Application class, specifying the static resource name.
4. The Code
To demonstrate this recipe, you will create the PreDefinedSystemStylesDemo Silverlight for Windows Phone 7 application. It uses the Pivot
control to separate
application content in different categories such as Brushes, Text Boxes,
Fonts, and Text Styles.
The application is simply a
visual reference to the static resource styles provided by the phone, so
the code is pretty simple, all defined in the MainPage.xaml file.
It starts defining all the Brush styles applicable to a control such as the Rectangle. The Fill property of the Rectangle control contains different static resource styles defined by the Brush style.
<Grid x:Name="LayoutRoot" Background="YellowGreen">
<controls:Pivot Title="Predefined styles">
<controls:PivotItem Header="Brushes">
<ListBox Margin="0,0,-12,0">
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneAccentBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneAccentBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneForegroundBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneForegroundBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100" Fill="{StaticResource
PhoneBackgroundBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneBackgroundBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100" Fill="{StaticResource
PhoneContrastBackgroundBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneContrastBackgroundBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100" Fill="{StaticResource
PhoneContrastForegroundBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneContrastForegroundBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneDisabledBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneDisabledBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneSubtleBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneSubtleBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneBorderBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneBorderBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource TransparentBrush}" />
<TextBlock Margin="5,0,0,0" Text="TransparentBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneSemitransparentBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneSemitransparentBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneChromeBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneChromeBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
</StackPanel>
</ListBox>
</controls:PivotItem>
The second Pivot control contains the styles applicable to text boxes:
<controls:PivotItem Header="TextBoxes">
<ListBox Margin="0,0,-12,0">
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<TextBox BorderBrush="{StaticResource PhoneTextBoxEditBorderBrush}"
Background="{StaticResource PhoneTextBoxEditBackgroundBrush}"
Foreground="{StaticResource PhoneTextBoxForegroundBrush}"
SelectionForeground="{StaticResource
PhoneTextBoxSelectionForegroundBrush}" />
<TextBlock TextWrapping="Wrap"
Text="TextBox with PhoneTextBoxEditBorderBrush,
PhoneTextBoxEditBackgroundBrush,
PhoneTextCaretBrush, PhoneTextBoxForegroundBrush, and
PhoneTextBoxSelectionForegroundBrush styles." />
</StackPanel>
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<TextBox IsReadOnly="True"
Background="{StaticResource PhoneTextBoxReadOnlyBrush}"
Text="I'm a read-only textbox"/>
<TextBlock TextWrapping="Wrap"
Text="Read only TextBox with PhoneTextBoxReadOnlyBrush" />
</StackPanel>
</ListBox>
</controls:PivotItem>
The third Pivot control contains the Fonts static resource styles. The FontFamily and FontSize properties of the TextBlock control are used to show the Font static resource styles:
<controls:PivotItem Header="Fonts">
<ListBox Margin="0,0,-12,0">
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="PhoneFontFamilyNormal with PhoneFontSizeSmall" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="PhoneFontFamilyNormal with PhoneFontSizeNormal" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FohntSize="{StaticResource PhoneFontSizeMedium}"
Text="PhoneFontFamilyNormal with PhoneFontSizeMedium" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="PhoneFontFamilyNormal with
PhoneFontSizeMediumLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="PhoneFontFamilyNormal with PhoneFontSizeLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
Text="PhoneFontFamilyNormal with PhoneFontSizeExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
Text="PhoneFontFamilyNormal with PhoneFontSizeExtraExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeHuge}"
Text="PhoneFontFamilyNormal with PhoneFontSizeHuge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="PhoneFontFamilyLight with PhoneFontSizeSmall" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="PhoneFontFamilyLight with PhoneFontSizeNormal" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Text="PhoneFontFamilyLight with PhoneFontSizeMedium" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="PhoneFontFamilyLight with PhoneFontSizeMediumLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="PhoneFontFamilyLight with PhoneFontSizeLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
Text="PhoneFontFamilyLight with PhoneFontSizeExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
Text="PhoneFontFamilyLight with PhoneFontSizeExtraExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeHuge}"
Text="PhoneFontFamilyLight with PhoneFontSizeHuge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeSmall" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeNormal" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeMedium" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeMediumLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeExtraExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeHuge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeHuge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeSmall" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeNormal" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeMedium" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeMediumLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeExtraExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeHuge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeHuge" />
</StackPanel>
</ListBox>
</controls:PivotItem>
The last Pivot control contains the static resource styles that are applicable to the text. In this case, you use the TextBlock control to demonstrate the effect of those resource styles:
<controls:PivotItem Header="Text Styles">
<ListBox Margin="0,0,-12,0">
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<TextBlock Style="{StaticResource PhoneTextBlockBase}"
Text="PhoneTextBlockBase" />
<TextBlock Style="{StaticResource PhoneTextNormalStyle}"
Text="PhoneTextNormalStyle" />
<TextBlock Style="{StaticResource PhoneTextTitle1Style}"
Text="PhoneTextTitle1Style" />
<TextBlock Style="{StaticResource PhoneTextTitle2Style}"
Text="PhoneTextTitle2Style" />
<TextBlock Style="{StaticResource PhoneTextTitle3Style}"
Text="PhoneTextTitle3Style" />
<TextBlock Style="{StaticResource PhoneTextLargeStyle}"
Text="PhoneTextLargeStyle" />
<TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}"
Text="PhoneTextExtraLargeStyle" />
<TextBlock Style="{StaticResource PhoneTextGroupHeaderStyle}"
Text="PhoneTextGroupHeaderStyle" />
<TextBlock Style="{StaticResource PhoneTextSmallStyle}"
Text="PhoneTextSmallStyle" />
<TextBlock Style="{StaticResource PhoneTextContrastStyle}"
Text="PhoneTextContrastStyle" />
<TextBlock Style="{StaticResource PhoneTextAccentStyle}"
Text="PhoneTextAccentStyle" />
</StackPanel>
</ListBox>
</controls:PivotItem>
</controls:Pivot>
</Grid>
This changes the application background color to YellowGreen so that system colors can be visible. Finally, all the predefined system resources are specified by using the {StaticResource} markup extension so as to have a visual representation of those resources at runtime.
5. Usage
From Visual Studio
2010, run the application by pressing Ctrl+F5. Depending on the target
output, the application deploys either on the Windows Phone Emulator or
the Windows Phone device.
The application starts showing
all the available brushes; you have to scroll up and down to see them
all. Flicking to the left brings you to the next page, which shows text
box styles. Going further to the left shows all the predefined font
styles. Finally, the last page shows the predefined text styles (see Figure 2).
